import { useState } from 'react'
import { PopconfirmProps, Popconfirm, message } from 'antd'
import { Remove } from '../../../service/index-roleList'
import style from './Delete.module.scss'

interface Props {
  id: string;
  getData: () => void;
}

const Delete = ({ id, getData }: Props) => {

  const [itenId, setItemId] = useState<string>(''); // 删除角色时传入的角色id

  // 删除角色确认
  const confirm: PopconfirmProps['onConfirm'] = () => {
    Remove(itenId)
      .then(() => {
        message.success('删除成功')
        getData()
      })
      .catch(err => console.log(err))

    
  };

  // 删除角色取消
  const cancel: PopconfirmProps['onCancel'] = () => {
    return;
  };

  return (
    <Popconfirm
      title="Delete the character?"
      description="确定删除该角色吗？"
      onConfirm={confirm}
      onCancel={cancel}
      okText="确认"
      cancelText="取消"
    >
      <button className={style.deleteBtn} onClick={() => setItemId(id)}>删除</button>
    </Popconfirm>
  )
}

export default Delete